<a-layout-sider id="sider" collapsible breakpoint="md" collapsed-width="0">
  <a-menu
    theme="dark"
    mode="inline"
    :selected-keys="['{{ request.path }}']"
    @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key"
  >
    <a-menu-item key="{{ url_for('v2ray.index') }}">
      <a-icon type="dashboard"></a-icon>
      <span>{{ _('system status') }}</span>
    </a-menu-item>
    {% if is_admin %}
    <a-menu-item key="{{ url_for('v2ray.accounts') }}">
      <a-icon type="user"></a-icon>
      <span>{{ _('accounts') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('v2ray.setting') }}">
      <a-icon type="setting"></a-icon>
      <span>{{ _('panel settings') }}</span>
    </a-menu-item>
    {% else %}
    <a-menu-item key="{{ url_for('v2ray.user') }}">
      <a-icon type="user"></a-icon>
      <span>{{ _('user information') }}</span>
    </a-menu-item>
    {% endif %}
    <a-menu-item key="{{ url_for('v2ray.clients') }}">
      <a-icon type="laptop"></a-icon>
      <span>{{ _('clients') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('v2ray.tutorial') }}">
      <a-icon type="read"></a-icon>
      <span>{{ _('tutorial') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('base.logout') }}">
      <a-icon type="logout"></a-icon>
      <span>{{ _('logout') }}</span>
    </a-menu-item>
  </a-menu>
</a-layout-sider>

<a-drawer
  id="sider-drawer"
  placement="left"
  :closable="false"
  @close="siderDrawer.close()"
  :visible="siderDrawer.visible"
  :wrap-style="{ padding: 0 }"
>
  <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
    <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
  </div>
  <a-menu
    theme="light"
    mode="inline"
    :selected-keys="['{{ request.path }}']"
    @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key"
  >
    <a-menu-item key="{{ url_for('v2ray.index') }}">
      <a-icon type="dashboard"></a-icon>
      <span>{{ _('system status') }}</span>
    </a-menu-item>
    {% if is_admin %}
    <a-menu-item key="{{ url_for('v2ray.accounts') }}">
      <a-icon type="user"></a-icon>
      <span>{{ _('accounts') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('v2ray.setting') }}">
      <a-icon type="setting"></a-icon>
      <span>{{ _('panel settings') }}</span>
    </a-menu-item>
    {% else %}
    <a-menu-item key="{{ url_for('v2ray.user') }}">
      <a-icon type="user"></a-icon>
      <span>{{ _('user information') }}</span>
    </a-menu-item>
    {% endif %}
    <a-menu-item key="{{ url_for('v2ray.clients') }}">
      <a-icon type="laptop"></a-icon>
      <span>{{ _('clients') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('v2ray.tutorial') }}">
      <a-icon type="read"></a-icon>
      <span>{{ _('tutorial') }}</span>
    </a-menu-item>
    <a-menu-item key="{{ url_for('base.logout') }}">
      <a-icon type="logout"></a-icon>
      <span>{{ _('logout') }}</span>
    </a-menu-item>
  </a-menu>
</a-drawer>

<script>
  const siderDrawer = {
    visible: false,
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    change() {
      this.visible = !this.visible;
    },
  };
</script>
